<template>
  <div class="system-container">
    <div class="container-header">
      <h3 class="title">都江堰语音合成系统</h3>
      <div class="header-r">
        <div class="nav-list">
          <div :class="[{'active':activeName === 'voice'}, 'navItem']" @click="handlerVoice">
            <div class="icon-div icon-div1"></div>
            <p>语音合成</p>
          </div>
          <div :class="[{'active':activeName === 'file'}, 'navItem']" @click="handlerFile">
            <div class="icon-div icon-div2"></div>
            <p>文件中心</p>
          </div>
          <div :class="[{'active':activeName === 'set'}, 'navItem']" @click="handlerSet">
            <div class="icon-div icon-div3"></div>
            <p>设置</p>
          </div>
        </div>
        <div class="user-contianer">
          <span>景区管理员</span>
          <el-button type="primary" round size="small" @click="logout">退出</el-button>
        </div>
      </div>
    </div>
    <router-view />
  </div>
</template>

<style lang="less" scoped>
  @import '../../assets/less/system';
</style>

<script>
export default {
  data () {
    return {
      activeName: 'voice'
    }
  },
  created () {
    this.getRouterItem()
  },
  methods: {
    getRouterItem () {
      this.activeName = this.$route.name.toLowerCase()
    },
    handlerVoice () {
      this.activeName = 'voice'
      this.$router.push('/system/voice')
    },
    handlerFile () {
      this.activeName = 'file'
      this.$router.push('/system/file')
    },
    handlerSet () {
      this.activeName = 'set'
      this.$router.push('/system/set')
    },
    logout () {
      this.$store.commit('setToken', '')
      this.$router.push('/')
      sessionStorage.removeItem('token')
    }
  }
}
</script>
